<template>
	<!-- <section class="aui-flexView">
		<section class="aui-scrollView"> -->
			<view class="aui-tab" data-ydui-tab>
				<view class="topNav">
					<image class="topImg" src="../../static/baokuan.png" mode=""></image>
					<view class="overAll">
						<view class="" v-for="(value,index) in menuTabs" :key="index"  @tap="topTab(value.id,index)"  :class="index==idx?'active':''">
							{{value.desc}}
						</view>
					</view>
				</view>
				<view class="divHeight"></view>
				<view class="tab-panel">
					<block v-for="(menuList,index2) in userName" :key="index2">
						<view class="all" :class="[currentTab==index2 ? 'tab-panel-item tab-active' : 'tab-panel-item']">
							<block v-for="(menuList2,index3) in userName" :key="index3">
								<view class="font"   >
									<image class="images" :src="wz+menuList2.img" mode="" lazy-load @tap="shopfoot(menuList2.id)"></image>
									<!-- <view >{{menuList2.img}}</view> -->
									<view class="you" @tap="shopfoot(menuList2.id)">
										<view class="title">
											{{menuList2.title}}
										</view>
										<view class="term">
											{{menuList2.desc}}
										</view>
										<view class="images-one">
											{{menuList2.seenum}} 
										</view>
										<view class="money">
											￥{{menuList2.nowprice}}
										</view>
										<view class="yuanjia">
											￥{{menuList2.price}}
										</view>
									</view>
									<view class="zuo">
										<view class="yisou">
											已售{{menuList2.salesnum}}
										</view>
										<view class="button" @tap="shopfoot(menuList2.id)">
										<view v-if="menuList2.is_hot==1" >去抢购</view><view v-else>立即购买</view>
										</view>
									</view>
								</view>
							</block>
						</view>
					</block>
					<!-- <view class="example-body">
						<uni-pagination :total="num"  @change="handlePage" :current="pageNum" pageSize="10"/>
					</view> -->
				</view>
			</view>
	<!-- 	</section>
	</section> -->
	
</template>

<script>
	export default {
		data() {
			return {
				limit:10,//一页有多少数据,
				fid:1,
				idx:0,
				scrollLeft: 0,
				currentTab: 0,
				pageNum:1,//当前所在页数
				num:0,//共有多少条数据
				total: 3,
				wz:'http://tuiguang.yiyunoto.com',
				scrollTop: 0,
				typeid:1,
				menuTabs:[],//分类列表
				old: {scrollTop: 0},
				menuLists: [],//具体的商品，
				userName:[] //所有商品储存在这里
			}
		},
		onLoad(option) {
			this.fid = option.id;
			console.log("typeid:",this.typeid)
			console.log("fid:",this.fid)
			uni.request({
					header:{authtoken:this.$store.state.token},
					url:'http://tuiguang.yiyunoto.com/api/index/productlist',
					method:'POST',
					data:{
						pages:this.pageNum,
						nums:this.limit,
						fid:this.fid,
						// typeid:,
						},
					success:(res)=>{
						this.typeid = res.data.data.type[0].id
						uni.request({
								header:{authtoken:this.$store.state.token},
								url:'http://tuiguang.yiyunoto.com/api/index/productlist',
								method:'POST',
								data:{
									pages:this.pageNum,
									nums:this.limit,
									fid:this.fid,
									typeid:res.data.data.type[0].id,
									},
								success:(res)=>{
									this.userName = [];
									this.menuLists = res.data.data.product
									this.userName = this.menuLists;
									this.num = res.data.data.count//一共有多少条数据
									this.menuTabs = res.data.data.type//分类列表
									
								},
								fail:(res)=>{
									console.log("请求失败",res)
								}
							})
					},
					fail:(res)=>{
						console.log("请求失败",res)
					}
				})
		},
		
		methods: {
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			// 导航标题点击事件
			topTab(id,current){
				console.log("typeid",this.typeid);
				this.idx = current;
				this.pageNum = 1;//请求页码为1
				this.typeid = id; //获取当前点击商品的id
				uni.request({
					url:'http://tuiguang.yiyunoto.com/api/index/productlist',
						header:{authtoken:this.$store.state.token},
						method:'POST',
						data:{
							pages:this.pageNum,
							nums:this.limit,
							fid:this.fid,
							typeid:this.typeid,
						},
						success:(res)=>{
							this.userName=[];
							this.menuLists = res.data.data.product
							this.userName = res.data.data.product
							this.num = res.data.data.count
							console.log("请求成功",res.data.data)
						},
						fail:(res)=>{
							console.log("请求失败",res)
						}
					})
			},
			goTop: function(e) {
			            this.scrollTop = this.old.scrollTop
			            this.$nextTick(function() {
			                this.scrollTop = 0
			            });},
			shopfoot:function(e){
							uni.navigateTo({
								url:"../product/product?id="+e
							})
						},
			swichMenu: async function(current) { //点击其中一个选项
				
			},
			reset() {
				this.total = 0
				this.current = 1
			},
			change(e) {
				console.log(e)
				this.current = e.current
			},
			getPlace(pages,nums){//pages请求的页码,nums//每页默认条数
			
				uni.request({
					url:'http://tuiguang.yiyunoto.com/api/index/productlist',
						header:{authtoken:this.$store.state.token},
						method:'POST',
						data:{
							pages:pages,
							nums:nums,
							fid:this.fid,
							typeid:this.typeid,
						},
						success:(res)=>{
							this.menuLists = res.data.data.product
							this.num = res.data.data.count
							console.log("请求成功",res.data.data)
							// setTimeout(()=>{
								uni.hideLoading()
							// },3000)
						},
						fail:(res)=>{
							console.log("请求失败",res)
						}
					})
				},
				// 下拉请求数据
				userList(pageNum){
					//请求数据的时候 传参加上page
					this.pageNum--
					console.log('我是page',pageNum)
					getPlace(pageNum,this.limit)
					this.menuLists = this.menuLists				
				}
		},
		onPullDownRefresh (){
				  console.log("我刷新了吗")
			      uni.stopPullDownRefresh()//这里是防止下拉的回不去，回去效果卡顿	
		},
		onReachBottom(){
			
			//判断是否已经加载完了
			if(this.userName.length == this.num || this.menuLists.length == 0 ){
				uni.showToast({
					title:'已经加载全部了'
				})
			}else{
				uni.showLoading({
				    title: '拼命加载中'
				});
				
				console.log("我触底了哦")
				this.pageNum++
				
				this.getPlace(this.pageNum,this.limit)
				
				// this.userList(this.page)
				let arr = [];
				let _this = this
				
				
				arr = _this.menuLists
				_this.userName = _this.userName.concat(arr)
				console.log('这是当前请求到的商品',this.menuLists);
				console.log('这是所有商品userName',_this.userName);
				
			}
			
		}
	}
</script>

<style>
	/* 公共样式表css */
	html,
	body {
		color: #333;
		margin: 0;
		height: 100%;
		font-family: "Myriad Set Pro", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-weight: normal;
	}
	* {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	a {
		text-decoration: none;
		color: #000;
	}
	select {
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
	img {
		border: 0;
	}
	body {
		background: #fff;
		color: #666;
	}
	td {
		margin: 0;
		padding: 0;
	}
	a {
		text-decoration: none;
		color: #08acee;
	}
	button {
		outline: 0;
	}
	img {
		border: 0;
	}
	textarea {
		margin: 0;
		font: inherit;
		color: inherit;
		outline: none;
	}
	li {
		list-style: none;
	}
	a {
		color: #666;
	}
	.clearfix::after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
	}
	.clearfix {}
	/* 必要布局样式css */
	.aui-flexView {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	.aui-scrollView {
		width: 100%;
		height: 100%;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		position: relative;
		background: #EFEDED;
		/* margin-top: -44px; */
	}
	.aui-navBar {
		height: 88upx;
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		z-index: 1002;
		background: #ffffff;
	}
	.aui-navBar:after {
		content: '';
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2upx;
		border-bottom: 2upx solid #ffffff;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}
	.aui-center {
		-webkit-box-ordinal-group: 3;
		-webkit-order: 2;
		-ms-flex-order: 2;
		order: 2;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		height: 88upx;
		width: 50%;
		margin-left: 25%;
	}
	.aui-center-title {
		text-align: center;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		display: block;
		text-overflow: ellipsis;
		font-size: 0.95rem;
		color: #3c3c3c;
		position: fixed;
		background: #FFFFFF;
		padding: 40upx;
	}
	
	.tab-nav {
		background: #EFEDED;
		height: 80upx;
		line-height: 80upx;
		/* border-radius: 80px; */
		display: block;
		/* margin: 0 auto; */
		position: fixed;
		width: 100%;
		margin-bottom: 15%;
		/* width: 185px; */
		z-index: 9999;
		padding-left: 100upx;
		padding-top: 10upx;
	}
	.tab-nav:after {
		content: '';
		position: fixed;
		z-index: 2;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2upx;
		border-bottom: 2upx solid #bbbbbb;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}
	.tab-nav-item {
		height: 80upx;
		line-height: 80upx;
		position: relative;
		font-family: Source Han Sans CN;
		text-align: center;
		color: #585858;
		font-size: 0.8rem;
		display: block;
		float: left;
		border-radius: 160upx;
		/* padding: 0 15px; */
		width: 20%;
		margin: 0 auto;
	}
	.tab-nav-item.tab-active {
		/* background-color: #51bd03; */
	}
	.tab-nav-item.tab-active a {
		color: #000000;
		font-weight: bold;
	}
	.tab-nav-item a {
		display: inherit;
		color: inherit;
		font-size: 0.8rem;
		color: #464646;
	}
	.tab-panel {
		position: relative;
		overflow: hidden;
		margin-bottom: 60upx;
	}
	.tab-panel .tab-panel-item {
		width: 100%;
		position: absolute;
		top: 0;
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	/* 下划线 */
	.tab-nav-item.tab-active:before {
		content: '';
		width: 40%;
		height: 0;
		position: absolute;
		left: 50%;
		bottom: 0;
		margin-left: -20%;
		z-index: 4;
		background-color: #f23030;
		border-radius: 240upx;
		border: 5upx solid #F23639;
	}
	.tab-panel .tab-panel-item.tab-active~.tab-panel-item {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
	.tab-panel .tab-panel-item.tab-active {
		position: relative;
		-webkit-transition: -webkit-transform .15s;
		transition: -webkit-transform .15s;
		transition: transform .15s;
		transition: transform .15s, -webkit-transform .15s;
		-webkit-transform: translateX(0);
		transform: translateX(0);
		/* padding-top: 51upx; */
	}
	.tab-item {
		padding-top: 180upx;
		height: 200upx;
	}
	.divHeight {
		background: #f0f2f5;
		width: 100%;
/* 		height: 10px;
		padding-top: 20px;
 */	}
	.aui-well-item {
		padding: 20px 15px 20px 20px;
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
	.images {
		float: left;
		width: 166upx;
		height: 166upx;
		margin-left: 39upx;
		background: #FFFFFF;
	}
	.you {
		width: 40%;
		height: 100%;
		padding-left: 25upx;
		float: left;
	}
	.dur {

		margin-left: 22upx;
		padding-left: 30upx;
	}
	.row {

		width: 100%;
		height: 143upx;
		background: #FFFFFF;
		margin-top: 2upx;
		border-bottom-width: 1upx;
		border-bottom-style: solid;
		border-bottom-color: #EDEDED;
	}
	.title {
		padding-top: 0upx;
		margin-left: 22upx;
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFangSC;
		color: rgba(41, 41, 41, 1);
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.term {
		font-size: 20upx;
		font-family: PingFangSC-Regular, PingFangSC;
		color: rgba(127, 127, 127, 1);
		margin-left: 24upx;
		padding-top: 1upx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.images-one {
		display: inline-block;
		padding: 0 10upx;
		border-radius: 10rpx;
		background: #F0F2F5;
		margin-left: 24upx;
		padding-top: 3upx;
		font-size: 18upx;
		font-family: Source Han Sans CN;
		text-align: center;
		color: rgba(91, 90, 90, 1);
	}
	.money {
		font-size: 26upx;
		font-family: Source Han Sans CN;
		color: rgba(242, 54, 57, 1);
		margin-left: 24upx;
		padding-top: 6upx;
	}
	.yuanjia {
		font-size: 20upx;
		font-family: Source Han Sans CN;
		color: rgba(146, 145, 145, 1);
		margin-left: 24upx;
		padding-top: 1upx;
		text-decoration: line-through;
	}
	.zuo {
		width: 20%;
		height: 100%;
		padding-left: 30upx;
		float: left;
		/* position: relative;
		right: 21upx */
	}
	.yisou {
		font-size: 20upx;
		font-family: Source Han Sans CN;
		color: rgba(103, 103, 104, 1);
		margin-top: 28upx;
	}
	.button {
		float: left;
		height: 44upx;
		background: #F23639;
		font-size: 24upx;
		font-family: Source Han Sans CN;
		text-align: center;
		color: rgba(255, 255, 255, 1);
		line-height: 45upx;
		margin-top: 60upx;
	}
	.font {
		width: 713upx;
		height: 192upx;
		background: #FFFFFF;
		/* background:rgba(255,255,255,1); */
		border-radius: 20upx;
		padding-top: 15upx;
		margin: 25upx auto;
	}
	.topImg {
		height: 55upx;
		width: 50upx;
	}
	.topNav{ /*上导航总体*/
		 display: flex;
		 margin: 40upx 40upx 0 40upx;
		 font-size: 26upx;
	}
	.all{
		padding-top: 0;
	}
	.overAll{  /*  上导航分类总体 */
		flex: 1;
		display: flex;
		justify-content: space-around;
		align-items: center;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space:nowrap;
		
		
	}
	.overAll view{
		padding: 14upx 14upx;
	}
	/* .sort{ /* 单独分类 */
		/* padding: 14upx 14upx; */
		
	/* } */ 
	.active{
			color: red;
			border-bottom: 6upx solid red;
		}
	.example-body{
		position: fixed;
		bottom: 0upx;
		left: 0;
		right: 0;
		background: #FFFFFF;
	}
</style>
